<template>
  <div class="echarts">
    <div :style="{height:'420px',width:'110%'}" ref="myEchart"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import "echarts/map/js/china.js"; // 引入中国地图数据
import { constants } from "fs";
export default {
  props: ["renderData"],
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.initEchartMap();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initEchartMap() {
      let _this = this;
      //这里我们用固定的数据，真正使用时，用父组件传递来的数据替换series即可
      let myChart = echarts.init(this.$refs.myEchart);
      window.onresize = myChart.resize;
      myChart.setOption({
        series: {
          type: "map",
          // 这个是重点配置区
          map: "china", // 表示中国地图
          roam: false,
          aspectScale: 0.85,
          selectedMode: "single",
          selectData: true,

          itemStyle: {
            normal: {
              areaColor: "#aad5ff",
              borderColor: "#fff",
              shadowColor: "rgba(0, 0, 0, 0.3)",
              shadowBlur: 5
            },
            emphasis: {
              label: {
                show: true
              },
              itemStyle: {
                areaColor: "#629fe0"
              }
            }
          },
          data: [{ name: "北京", selected: true }],
          layoutCenter: ["50%", "50%"],
          layoutSize: "130%"
        }
      });
      myChart.on("click", function(params) {
        _this.$emit("handleChooseMap", params);
      });
    }
  }
};
</script>
